﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>聊天测试页</title>
    <script src="jquery.js"></script>
    <style type="text/css">

        a.navbar-brand {
            white-space: normal;
            text-align: center;
            word-break: break-all;
        }

        /* Provide sufficient contrast against white background */
        a {
            color: #0366d6;
        }

        .btn-primary {
            color: #fff;
            background-color: #1b6ec2;
            border-color: #1861ac;
        }

        .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
            color: #fff;
            background-color: #1b6ec2;
            border-color: #1861ac;
        }

        /* Sticky footer styles
-------------------------------------------------- */
        html {
            font-size: 14px;
        }

        @media (min-width: 768px) {
            html {
                font-size: 16px;
            }
        }

        .border-top {
            border-top: 1px solid #e5e5e5;
        }

        .border-bottom {
            border-bottom: 1px solid #e5e5e5;
        }

        .box-shadow {
            box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
        }

        button.accept-policy {
            font-size: 1rem;
            line-height: inherit;
        }

        /* Sticky footer styles
-------------------------------------------------- */
        html {
            position: relative;
            min-height: 100%;
        }

        body {
            /* Margin bottom by footer height */
            margin-bottom: 60px;
        }

        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            white-space: nowrap;
            line-height: 60px; /* Vertically center the text there */
        }

    </style>
</head>
<body>
    <div style="margin-bottom:5px;">
        房间号: <input type="text" id="txtRoomNo" value="CallScreen" />
        <button id="btnJoin">加入房间</button>
        <button id="btnLeave">离开</button>
    </div>
    <div style="margin-bottom:5px;">
        名字: <input type="text" id="txtNickName" value="网页" />
    </div>
    <div style="height:300px;width:600px">
        <textarea style="height:100%;width:100%" id="msgList"></textarea>
        <div style="text-align: right">
            <input type="text" id="txtMsg" value="" />
            <button id="btnSend">发送</button>
        </div>
    </div>
    <script type="text/javascript">

        //窗体准备完毕
        $(function () {

        });
        var server = 'ws://localhost:9600'; //如果开启了https则这里是wss

        var WEB_SOCKET = new WebSocket(server + '/ws');

        WEB_SOCKET.onopen = function (evt) {
            console.log('打开连接 ...');
            $('#msgList').val('websocket 打开连接 .');
        };

        WEB_SOCKET.onmessage = function (evt) {
            console.log('收到消息: ' + evt.data);
            if (evt.data) {
                var content = $('#msgList').val();
                content = content + '\r\n' + evt.data;

                $('#msgList').val(content);
            }
        };

        WEB_SOCKET.onclose = function (evt) {
            console.log('关闭连接.');
        };

        $('#btnJoin').on('click', function () {
            var roomNo = $('#txtRoomNo').val();
            var name = $('#txtNickName').val();
            if (roomNo) {
                var msg = {
                    action: 'join',
                    msg: roomNo,
                    name: name
                };
                WEB_SOCKET.send(JSON.stringify(msg));
            }
        });

        $('#btnSend').on('click', function () {
            var message = $('#txtMsg').val();
            var name = $('#txtNickName').val();
            if (message) {
                WEB_SOCKET.send(JSON.stringify({
                    action: 'send_to_room',
                    msg: message,
                    name: name
                }));
            }
        });

        $('#btnLeave').on('click', function () {
            var name = $('#txtNickName').val();
            var msg = {
                action: 'leave',
                msg: '',
                name: name
            };
            WEB_SOCKET.send(JSON.stringify(msg));
        });

    </script>
</body>
</html>